<template>
  <div id="course-detail-view">
    <div class="course-detail">
      <div class="course-cover img-box">
        <img :src="detail.cover" alt="cover">
      </div>
      <div class="course-info">
        <div class="course-title">
          {{ detail.name }}
        </div>
        <div class="course-teacher">
          <span class="name">{{ detail.teacherName }}</span>
          <span class="position">{{ detail.teacherTitle }}</span>
        </div>
        <div class="course-status">
          <div>
            <span>共{{ detail.chapterCount }}章{{ detail.sectionCount }}讲 | </span>
            <span>{{ detail.participantNum }}人参加</span>
          </div>
          <div>
            <span>{{ detail.description }}</span>
          </div>
        </div>
        <div class="course-price">
          <del class="price-before">￥{{ detail.price }}</del>
          <span class="price-now">￥{{ detail.price * detail.discount / 10 }}</span>
        </div>
        <div class="course-learn" v-if="detail.userStatus == 0 || detail.userStatus == 1" @click="gotoBuy()">立即购买</div>
        <div class="course-learn" v-if="detail.userStatus == 2 || detail.userStatus == 3" @click="gotoLearn()">立即学习</div>
      </div>
    </div>
    <div class="course-sections">
      <div class="sections">
      <span :class="{'chosen-section': chosen === index+1}"
            @click="chosen = index+1"
            v-for="(item,index) in sections" :key="item">{{ item }}</span>
      </div>
      <div class="course-section card">
        <div v-show="chosen === 1" class="course-introduce">
          <div v-html="detail.introduction"></div>
        </div>
        <div v-show="chosen === 2" class="course-menu">
          <div class="chapter" v-for="(chapter,index1) in menu" :key="chapter.id">
            <div class="chapter-title">
              <span>{{ chapter.name }}</span>
              <span><img src="@/assets/more.png" alt="more"></span>
            </div>
            <div class="chapter-content">
              <div class="section" v-for="(section,index2) in chapter.sections" :key="section.id">
                <div class="section-title">{{ index1 + 1 }}-{{ index2 + 1 }} {{ section.name }}</div>
                <div v-if="section.open == 1" class="section-status">试学</div>
              </div>
              <!--              <div class="test">单元测试</div>-->
            </div>
          </div>
        </div>
        <div v-show="chosen === 3" class="course-comment">
          <div class="comment-list">
            <div class="list-item" v-for="item in comments" :key="item.id">
              <Comment :comment="item"></Comment>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "_c/Comment";

export default {
  name: "CourseDetailView",
  components: {Comment},
  data() {
    return {
      id: '',
      chosen: 1,
      sections: ['课程介绍', '课程目录', '课程评价'],
      detail: {},
      menu: [],
      comments: []
    }
  },
  mounted() {
    this.getDetail();
    this.getMenu();
    this.getEvaluation();
  },
  methods: {
    getDetail() {
      let courseId = this.$route.params.courseId;
      this.courseId = courseId;
      this.$api.getCourseInfo({
        courseId
      }).then(res => {
        console.log("detail", res)
        this.detail = res.data.data;
      })
    },
    getMenu() {
      let courseId = this.$route.params.courseId;
      this.$api.getSimpleCourseDirs({
        courseId
      }).then(res => {
        console.log("detail", res)
        this.menu = res.data.data;
      })
    },
    getEvaluation() {
      let courseId = this.$route.params.courseId;
      this.$api.getEvaluations({
        pageSize: 40,
        pageNow: 1,
        sortType: 0,
        courseId
      }).then(res => {
        console.log("detail", res)
        this.comments = res.data.data.rows;
      })
    },
    gotoLearn() {
      const {href} = this.$router.resolve({
        name: 'learn-notice',
        params: {
          courseId: this.$route.params.courseId
        }
      });
      window.open(href, '_blank');
    },
    gotoBuy(){
      alert("暂未开放购买，请联系企业负责人直接导入！");
    }
  }
}
</script>

<style scoped lang="scss">

.course-detail {
  display: flex;
  margin-bottom: 40px;
}

.course-cover {
  flex-shrink: 0;
  margin-right: 20px;
  width: 360px;
  height: 200px;
}

.course-info {
  flex: 1;
  position: relative;
  font-size: 14px;

  > div {
    margin-bottom: 10px;
  }

  .course-price {
    margin: 25px 0 0;

    .price-now {
      font-size: 22px;
      text-shadow: 0 4px 4px #357FF845;
    }
  }
}

.course-title {
  font-size: 20px;
  font-weight: 600;
}

.course-teacher {
  .name {
    margin-right: 10px;
  }
}

.course-status {
  padding: 5px 15px;
  border-radius: 10px;
  background: #eaeaea;
  color: #888;

  > div {
    margin: 10px 0;
  }
}

.course-learn {
  margin: 0 !important;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  line-height: 35px;
  border-radius: 20px;
  text-align: center;

  color: white;
  font-weight: 600;
  background: #357FF8;

  cursor: pointer;
}

.sections {
  margin-bottom: 20px;

  > span {
    font-size: 18px;
    cursor: pointer;
    margin-right: 30px;
    transition: .3s;
  }

  .chosen-section {
    color: #357FF8;
    transition: .3s;
    text-shadow: 2px 2px 5px rgba(123, 123, 123, .2);
  }
}

.course-menu {
  .chapter {
    margin-bottom: 20px;
    padding: 10px;
  }

  .chapter-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 18px;
    background: #eaeaea;

    img {
      width: 12px;
      height: 12px;
      object-fit: cover;
    }
  }

  .chapter-content {
    padding: 0 20px;
    font-size: 14px;
  }

  .section {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;

    .section-status {
      color: white;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 10px;
      background: #8EB9FF;
    }
  }

}

.comment-list {
  .list-item {
    margin: 10px 0;
  }

  .list-item::after {
    display: block;
    content: '';
    height: 0;
    width: 80%;
    margin: auto;
    border-bottom: 1px solid #eaeaea;
  }

  .list-item:last-child::after {
    display: none;
  }
}
</style>
